<template>
  <div class="index">
    <el-container>
      <el-header height="68px">
        <m-header></m-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <m-aside></m-aside>
        </el-aside>
        <el-main>
          <div class="main">
            <div class="title">用户概览</div>
            <div class="overview">
              <el-row>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">
                    <p class="number">{{data.availMsgCount}}</p>
                    <p class="text">剩余数量
                      <span class="pay" @click="tip">充值</span>
                    </p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-left">
                    <p class="number">{{data.todayMsgCount}}</p>
                    <p class="text">今日</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">
                    <p class="number">{{data.presentMonthMsgCount}}</p>
                    <p class="text">当月</p>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <p class="number">{{data.usedMsgCount}}</p>
                    <p class="text">累计发送</p>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="user">
              <div class="row">
                <div class="col">
                  <div class="rol-content">
                    <p>用户账号：</p>
                    <p class="font">{{data.phoneNumber}}</p>
                  </div>
                </div>
                <div class="col">
                  <div class="rol-content">
                    <p>用户姓名：</p>
                    <p class="font">{{data.realName}}</p>
                  </div>
                </div>
                <div class="col">
                  <div class="rol-content">
                    <p>用户身份证号：</p>
                    <p class="font">{{data.idNumber}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="notice">
              <h2>用户支持：</h2>
              <p>如您的每月发送量超过50万条且需要通过API接口触发发送，请联系售前咨询：</p>
              <p>电话：</p>
              <p>微信：</p>
              <p>如您使用过程中遇到任何问题，请联系售后咨询：</p>
              <p>电话：</p>
              <p>微信：</p>
              <p>QQ：</p>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getCookie } from "./until/index";

export default {
  data() {
    return {
      data: {}
    };
  },
  created() {
    this.$ajax.get("getSmsUserSummary.ashx?userId=" +getCookie("userid") +"&token=" +getCookie("token"))
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
          this.data = data;
        } else {
          this.$message.error(res.data.msg + "请退出后重新登录");
        }
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    tip() {
      this.$router.push({
        path: "/purchase"
      });
    }
  }
};
</script>
<style scoped>
.index {
  overflow: hidden;
}
.el-header {
  background-color: #3a4759;
  color: #fff;
}
.el-aside {
  background-color: #485668;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
.el-main {
  background-color: #f0eff5;
  color: #333;
  text-align: center;
  height: 100%;
}
.pay {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 50px;
  color: rgb(78, 134, 255);
  cursor: pointer;
}
.main {
  width: 100%;
}
.title {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
}
.overview {
  padding-bottom: 20px;
}
.el-row {
  background: #fff;
  border: 1px solid #adacac;
}
.el-col {
  border-radius: 4px;
  height: 100px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}
.bg-purple-left {
  border-right: 1px solid #e5e5e5;
}
.grid-content {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.grid-content p {
  text-align: center;
  margin: 0;
  line-height: 40px;
}
.grid-content p.number {
  font-family: "Helvetica";
  font-weight: bold;
  font-size: 20px;
}
.grid-content p.text {
  font-family: "Helvetica";
  font-size: 14px;
  position: relative;
}
.user {
  width: 100%;
  padding-bottom: 20px;
  overflow: hidden;
  background: #fff;
}
.user .row {
  width: 100%;
  clear: both;
}
.user .row .col {
  width: 50%;
  float: left;
  text-align: left;
}
.rol-content {
  margin-left: 20px;
}
.rol-content p {
  font-size: 14px;
  height: 20px;
}
.rol-content p.font {
  font-weight: bold;
}
.notice {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  padding: 30px 0;
  background: #fff;
  text-align: left;
  text-indent: 2em;
  color: #666;
}
.notice h2 {
  margin-bottom: 30px;
}
.notice p {
  line-height: 25px;
}
</style>
  